<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<view class="header">
			<h2>订单</h2>
			<view class="sele">
				<view class="item" @tap="show2 = true">
					<span>{{ seleDate }}</span>
					<image src="@/static/img/down.png" mode=""></image>
				</view>
				<view v-if="userInfo.is_leader == 1" class="item" @tap="routerTo('/pages/pageB/data/fiter?status=1')">
					<span>人员筛选</span>
					<image src="@/static/img/down.png" mode=""></image>
				</view>
				<view v-if="userInfo.is_manager == 1" class="item" @tap="show4 = true">
					<span>部门筛选</span>
					<image src="@/static/img/down.png" mode=""></image>
				</view>
				<view class="item" @tap="show1 = true">
					<span>{{ seleStu }}</span>
					<image src="@/static/img/down.png" mode=""></image>
				</view>
			</view>
		</view>
		<view v-if="list.length == 0 && isShow" class="kong">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无订单"></u-empty>
		</view>
		<ul class="list" v-if="isShow">
			<li v-for="(item, index) in list" :key="index">
				<view class="top">
					<view class="info">
						<view class="name">{{item.order.nickname}}</view>
					</view>
					<view class="post">{{item.order.department}}</view>
				</view>
				<view class="one">
					<view class="msg">订单编号：{{ item.tag }}</view>
					<view class="tag">
						<span v-if="item.status == 0">待付款</span>
						<span v-if="item.status == 1">已支付</span>
						<span v-if="item.status == 10">已发货</span>
						<span v-if="item.status == 11">在途</span>
						<span v-if="item.status == 12">派件</span>
						<span v-if="item.status == 13">退回</span>
						<span v-if="item.status == 14">退签</span>
						<span v-if="item.status == 15">转投</span>
						<span v-if="item.status == 16">疑难</span>
						<span v-if="item.status == 17">拒签</span>
						<span v-if="item.status == 20">已完成</span>
					</view>
				</view>
				<view class="two">
					<view class="img">
						<image :src="item.cover_ico" mode=""></image>
					</view>
					<view class="info msg">
						<view class="tit">{{ item.product_name }}</view>
						<view class="sku">{{ item.parameters }}</view>
					</view>
					<view class="info right">
						<view class="price">￥{{ item.price }}</view>
						<view class="num">X{{ item.num }}</view>
					</view>
				</view>
				<view class="timemsg">订单时间：{{ item.pay_time_text }}</view>
				<view class="the">
					<view class="msg">快递单号：{{ item.tool }}</view>
					<view class="btn on" @tap="showOrder(item)">查看物流</view>
				</view>
			</li>
		</ul>
		<u-popup :show="show" :round="10" mode="bottom" @close="show = false">
			<view class="popup">
				<view class="popupHeader">
					<view class="num" v-if="logistshow">
						<span>{{ seleOrder.tool_name }}：</span>
						<span>{{ seleOrder.tool }}</span>
						<view class="btn" @tap="copy(seleOrder.tool)">复制</view>
					</view>
					<view class="mun" v-else></view>
					<image @tap="show = false" class="close" src="@/static/img/close.png" mode=""></image>
				</view>
				<view class="goods">
					<view class="two">
						<view class="img">
							<image :src="seleOrder.cover_ico" mode=""></image>
						</view>
						<view class="info msg">
							<view class="tit">{{ seleOrder.product_name }}</view>
							<view class="sku">{{ seleOrder.parameters }}</view>
						</view>
						<view class="info right">
							<view class="price">￥{{ seleOrder.price }}</view>
							<view class="num">X{{ seleOrder.num }}</view>
						</view>
					</view>
				</view>
				<view class="popupinfo">
					<view class="item">
						<span>下单人：</span>
						<span>{{ add.realname }}</span>
					</view>
					<view class="item">
						<span>下单电话：</span>
						<span>{{ add.mobile }}</span>
					</view>
				</view>
				<view class="add">
					<view class="img">
						<image src="@/static/img/car.png" mode=""></image>
					</view>
					<view class="msg">
						<view :class="{ item: true }">
							<span>订单编号：</span>
							<span class="txt">{{ seleOrder.tag }}</span>
							<view class="btn" @tap="copy(seleOrder.tag)">复制</view>
						</view>
						<view :class="{ item: true, expand: expand }">
							<span>收货地址：</span>
							<span class="txt">{{ add.province }}{{ add.city }}{{ add.district }}{{ add.address }}</span>
							<view class="more" @tap="expand = !expand">
								<span v-if="!expand">展开</span>
								<span v-else>收起</span>
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="wuliu" scroll-y="true">
					<lee-logistics color="#0a84ff" :showCard="false" :list="logist"></lee-logistics>
				</scroll-view>
			</view>
		</u-popup>
		<u-datetime-picker :show="show2" v-model="value1" mode="date" :maxDate="maxDate1" @cancel="show2 = false"
			@close="show2 = false" @confirm="confirm1" title="开始时间" :closeOnClickOverlay="true"></u-datetime-picker>
		<u-datetime-picker :show="show3" v-model="value2" mode="date" :maxDate="maxDate2" :minDate="minDate2"
			@cancel="show3 = false" @close="show3 = false" @confirm="confirm2" title="结束时间"
			:closeOnClickOverlay="true"></u-datetime-picker>
		<u-picker :show="show1" :columns="columns" @cancel="show1 = false" @close="show1 = false"
			:closeOnClickOverlay="true" keyName="name" @confirm="confirm"></u-picker>
		<!-- <innerTabbar seleTabbar="1"></innerTabbar> -->
		<u-picker :show="show4" :columns="columns2" @cancel="show4 = false" @close="show4 = false" :closeOnClickOverlay="true" keyName="name" @confirm="confirm3"></u-picker>
	</view>
</template>

<script>
	import leeLogistics from '@/components/StarLee-logistics/logistics.vue'
	import {
		Productlist,
		innerinfo,
		Transport,
		logisticsInfo,
		departments
	} from '@/api/inner.js';
	import innerTabbar from '../../components/innerTabbar.vue';
	export default {
		components: {
			innerTabbar,
			leeLogistics
		},
		data() {
			return {
				isShow: false,
				show: false,
				expand: false,
				show1: false,
				columns: [
					[{
							name: '全部',
							id: -1
						},
						{
							name: '已支付',
							id: 1
						},
						{
							name: '已发货',
							id: "10,11,12"
						},
						{
							name: '已完成',
							id: 20
						}
					]
				],
				show2: false,
				value1: Number(new Date()),
				maxDate1: Number(new Date()),
				show3: false,
				value2: Number(new Date()),
				maxDate2: Number(new Date()),
				minDate2: Number(new Date()),
				seleDate: '时间筛选',
				seleStu: '订单状态',
				data: {
					page_size: 15,
					start_date: '', //开始日期
					end_date: '', //结束日期
					status: -1,
					department_user_id: '',
					page: 1
				},
				list: [],
				userInfo: {},
				seleOrder: {},
				add: {},
				logist: [],
				logistshow: false,
				watermark: '',
				last_page: '',
				show4:false,
				columns2:[]
			};
		},
		onLoad(e) {
			if (e.id) {
				this.data.department_user_id = e.id
			}
			this.getInfo()
			this.getList();
			this.getBm()
			this.watermark = uni.getStorageSync('watermark')
		},
		onReachBottom() {
			if (this.data.page == this.last_page) {
				uni.showToast({
					title: '已经是最后一页了',
					icon: 'none'
				})
			} else {
				this.data.page++
				this.getList()
			}
		},
		methods: {
			confirm3(e){
				this.txt = e.value[0].name
				this.data.department_id = e.value[0].id
				this.getList()
				this.show4 = false
			},
			async getBm(){
				let res = await departments()
				console.log(res)
				this.columns2.push(res.data)
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			showOrder(item) {
				this.logist = []
				Transport({
					id: item.order.addressid
				}).then(res => {
					if (res.code == 1) {
						this.add = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
				logisticsInfo({
					id: item.id
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.logistshow = true
						res.data.forEach((item, index) => {
							this.logist.push({
								status: item.status,
								content: item.context,
								time: item.time
							})
						})
						console.log(this.logist)

					} else {
						this.logistshow = false
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
				this.seleOrder = item
				this.show = true
			},
			async getInfo() {
				let res = await innerinfo()
				this.userInfo = res.data
			},
			confirm(e) {
				this.data.page = 1
				this.data.status = e.value[0].id;
				this.getList();
				this.seleStu = e.value[0].name;
				this.show1 = false;
			},
			confirm1(e) {
				let date = new Date(e.value);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate()
				this.data.start_date = `${y}-${m}-${d}`;
				this.minDate2 = e.value;
				this.show3 = true;
				this.show2 = false;
			},
			confirm2(e) {
				this.data.page == 1
				let date = new Date(e.value);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate()
				this.data.end_date = `${y}-${m}-${d}`;
				this.seleDate = `${this.data.start_date} - ${this.data.end_date}`;
				this.getList();
				this.show3 = false;
			},
			async getList() {
				if (this.data.page == 1) {
					this.list = []
				}
				let res = await Productlist(this.data);
				this.last_page = res.data.last_page
				if (res.code == 1) {
					res.data.data.forEach((item, index) => {
						this.list.push(item)
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				this.isShow = true;
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: calc(100vh - 50px);
		background-color: #f2f4f5;

		/deep/.lee-list-box {
			padding: 2px 0px !important;
		}

		/deep/.lee-flex:last-child {
			padding-bottom: 0px !important;
		}

		.kong {
			padding-top: 35px;

			/deep/.u-empty {
				// background-color: #fff;
				border-radius: 6px;
				padding-bottom: 10px;
			}
		}

		.header {
			background-color: #fff;
			padding: 20px 15px 10px;

			h2 {
				font-size: 20px;
				color: #3d3d3d;
				margin-bottom: 15px;
				font-weight: 700;
			}

			.search {
				width: 100%;
				border-radius: 10px;
				background-color: #f2f3f7;
				display: flex;
				align-items: center;
				padding: 10px 12px;
				margin-bottom: 15px;

				image {
					width: 12px;
					height: 12px;
					margin-right: 7px;
				}

				input {
					flex: 1;
				}
			}

			.sele {
				display: flex;

				.item {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #232323;
					font-size: 12px;

					image {
						width: 15px;
						height: 15px;
					}
				}
			}
		}

		.list {
			padding: 15px;
			padding-bottom: 55px;

			li {
				background-color: #fff;
				border-radius: 10px;
				padding: 10px 15px;
				margin-bottom: 15px;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 7px;
					border-bottom: 1px solid #e2e2e2;
					margin-bottom: 7px;

					.info {
						display: flex;
						align-items: center;
						font-size: 14px;
						color: #3d3d3d;

						image {
							width: 28px;
							height: 28px;
							border-radius: 100px;
							margin-right: 10px;
						}
					}

					.post {
						font-size: 12px;
						color: #999999;
					}
				}

				.one {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10px;

					.msg {
						font-size: 11px;
						color: #666666;
					}

					.tag {
						font-size: 14px;
						color: #3aa2ff;
					}
				}

				.two {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.img {
						image {
							width: 80px;
							height: 70px;
							border-radius: 5px;
						}
					}

					.msg {
						flex: 1;
						margin: 0 10px 0 5px;
					}

					.right {
						align-items: end;
						font-size: 13px;
						color: #666666;
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 70px;
						font-size: 14px;

						.tit {
							color: #232323;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}

						.sku {
							color: #666666;
						}
					}
				}

				.timemsg {
					margin-top: 10px;
					color: #999;
					font-size: 12px;
				}

				.the {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10px;

					.msg {
						font-size: 12px;
						color: #999999;
					}

					.btn {
						font-size: 14px;
						width: 80px;
						padding: 5px 0;
						text-align: center;
						border-radius: 1000px;
					}

					.on {
						color: #fff;
						background-color: #3aa2ff;
					}
				}
			}
		}

		.popup {
			padding: 20px 15px;

			.wuliu {
				max-height: 300px;
			}

			.popupHeader {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;

				.num {
					display: flex;
					align-items: center;

					span {
						font-size: 14px;
					}

					span:first-child {
						color: #0a84ff;
					}

					span:last-child {
						color: #3d3d3d;
					}

					.btn {
						padding: 2px 5px;
						border: 1px solid #9c9c9c;
						border-radius: 5px;
						font-size: 12px;
						margin-left: 3px;
					}
				}

				.close {
					width: 30px;
					height: 30px;
				}
			}

			.goods {
				padding-bottom: 8px;
				border-bottom: 1px solid #eeeeee;
				margin-bottom: 15px;

				.two {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.img {
						image {
							width: 80px;
							height: 70px;
							border-radius: 5px;
						}
					}

					.msg {
						flex: 1;
						margin: 0 10px 0 5px;
					}

					.right {
						align-items: end;
						font-size: 13px;
						color: #666666;
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 70px;
						font-size: 14px;

						.tit {
							color: #232323;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}

						.sku {
							color: #666666;
						}
					}
				}
			}

			.popupinfo {
				display: flex;
				justify-content: space-between;
				padding-bottom: 15px;
				border-bottom: 1px solid #eeeeee;
				margin-bottom: 15px;

				.item {
					font-size: 16px;
					color: #666666;
				}
			}

			.add {
				display: flex;
				align-items: center;

				.img {
					width: 22px;
					height: 16px;
					margin-right: 10px;

					image {
						width: 22px;
						height: 16px;
						vertical-align: top;
					}
				}

				.msg {
					flex: 1;

					.item:first-child {
						margin-bottom: 5px;
					}

					.item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 16px;
						color: #232323;

						.btn {
							padding: 2px 5px;
							border: 1px solid #9c9c9c;
							border-radius: 5px;
						}

						.txt {
							// width: 210px;
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							word-break: break-all;
						}

						.more {
							color: #9f9f9f;
							padding: 2px 5px;
							border: 1px;
						}
					}

					.expand {
						align-items: start;

						.txt {
							-webkit-line-clamp: 10;
						}
					}
				}
			}
		}
	}
</style>